<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSP测试 - 模型订阅系统</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .test-container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .test-button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background: #0056b3;
        }
        .test-result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 5px;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🔧 CSP修复测试页面</h1>
        <p>此页面用于测试CSP违规问题是否已修复</p>
        
        <div class="test-section">
            <h3>测试1: Tab切换功能</h3>
            <p>点击下面的按钮测试tab切换功能：</p>
            <nav class="nav-tabs">
                <button class="nav-tab active" data-tab="test1">测试Tab 1</button>
                <button class="nav-tab" data-tab="test2">测试Tab 2</button>
                <button class="nav-tab" data-tab="test3">测试Tab 3</button>
            </nav>
            
            <div id="test1-tab" class="tab-content active">
                <h4>测试Tab 1 内容</h4>
                <p>这是第一个测试标签页的内容。</p>
            </div>
            
            <div id="test2-tab" class="tab-content">
                <h4>测试Tab 2 内容</h4>
                <p>这是第二个测试标签页的内容。</p>
            </div>
            
            <div id="test3-tab" class="tab-content">
                <h4>测试Tab 3 内容</h4>
                <p>这是第三个测试标签页的内容。</p>
            </div>
        </div>
        
        <div class="test-section">
            <h3>测试2: 按钮点击功能</h3>
            <p>点击下面的按钮测试事件监听器：</p>
            <button class="test-button" id="testBtn1">测试按钮 1</button>
            <button class="test-button" id="testBtn2">测试按钮 2</button>
            <button class="test-button" id="testBtn3">测试按钮 3</button>
        </div>
        
        <div class="test-section">
            <h3>测试3: 模态框功能</h3>
            <p>点击下面的按钮测试模态框：</p>
            <button class="test-button" id="showModalBtn">显示模态框</button>
            
            <div id="testModal" class="modal" data-modal="testModal">
                <div class="modal-dialog">
                    <div class="modal-header">
                        <h3 class="modal-title">测试模态框</h3>
                        <button class="modal-close" data-modal-close="testModal">&times;</button>
                    </div>
                    <div class="modal-content">
                        <p>这是一个测试模态框，用于验证CSP修复。</p>
                        <button class="test-button" id="closeModalBtn">关闭模态框</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="test-section">
            <h3>测试结果</h3>
            <div id="testResults">
                <div class="test-result success">
                    ✅ 页面加载成功，没有CSP错误
                </div>
            </div>
        </div>
    </div>

    <script>
        // 测试用的JavaScript代码
        console.log('🧪 CSP测试页面加载完成');
        
        // 设置事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🔧 设置测试事件监听器...');
            
            // Tab切换测试
            document.querySelectorAll('.nav-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabName = this.getAttribute('data-tab');
                    console.log('🖱️ 点击测试标签页:', tabName);
                    switchTestTab(tabName);
                });
            });
            
            // 按钮点击测试
            document.getElementById('testBtn1').addEventListener('click', function() {
                showTestResult('测试按钮 1 点击成功');
            });
            
            document.getElementById('testBtn2').addEventListener('click', function() {
                showTestResult('测试按钮 2 点击成功');
            });
            
            document.getElementById('testBtn3').addEventListener('click', function() {
                showTestResult('测试按钮 3 点击成功');
            });
            
            // 模态框测试
            document.getElementById('showModalBtn').addEventListener('click', function() {
                showModal('testModal');
            });
            
            document.getElementById('closeModalBtn').addEventListener('click', function() {
                hideModal('testModal');
            });
            
            // 模态框背景点击关闭
            document.getElementById('testModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    hideModal('testModal');
                }
            });
            
            // 模态框关闭按钮
            document.querySelector('[data-modal-close="testModal"]').addEventListener('click', function() {
                hideModal('testModal');
            });
            
            console.log('✅ 测试事件监听器设置完成');
        });
        
        // 测试Tab切换函数
        function switchTestTab(tabName) {
            console.log('🔄 切换测试标签页到:', tabName);
            
            try {
                // 隐藏所有标签页
                document.querySelectorAll('.tab-content').forEach(tab => {
                    tab.classList.remove('active');
                });
                
                // 移除所有标签按钮的激活状态
                document.querySelectorAll('.nav-tab').forEach(btn => {
                    btn.classList.remove('active');
                });
                
                // 显示目标标签页
                const targetTab = document.getElementById(`${tabName}-tab`);
                if (targetTab) {
                    targetTab.classList.add('active');
                    console.log('✅ 测试标签页已激活');
                }
                
                // 激活目标按钮
                const targetBtn = document.querySelector(`[data-tab="${tabName}"]`);
                if (targetBtn) {
                    targetBtn.classList.add('active');
                    console.log('✅ 测试按钮已激活');
                }
                
                showTestResult(`成功切换到标签页: ${tabName}`);
                
            } catch (error) {
                console.error('❌ 切换测试标签页失败:', error);
                showTestResult(`切换标签页失败: ${error.message}`, 'error');
            }
        }
        
        // 显示测试结果
        function showTestResult(message, type = 'success') {
            const resultsDiv = document.getElementById('testResults');
            const resultDiv = document.createElement('div');
            resultDiv.className = `test-result ${type}`;
            resultDiv.textContent = message;
            resultsDiv.appendChild(resultDiv);
        }
        
        // 显示模态框
        function showModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.style.display = 'flex';
                console.log('✅ 模态框已显示:', modalId);
                showTestResult(`模态框已显示: ${modalId}`);
            }
        }
        
        // 隐藏模态框
        function hideModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.style.display = 'none';
                console.log('✅ 模态框已隐藏:', modalId);
                showTestResult(`模态框已隐藏: ${modalId}`);
            }
        }
    </script>
</body>
</html>



